{extend name="default:layout:base" /}

{block name="main"}
<form class="layui-form" action="" id="ajax-form" method="post">
    <table class="layui-table" lay-skin="line" >
        <thead>
        <tr>
            <th style="width: 200px">微信开放平台开发信息</th>
            <th style="text-align: right;">
                <a href="https://open.weixin.qq.com/" class="layui-btn layui-btn-sm bg-success" target="_blank"><i class="fa fa-wechat"></i>登录微信开放平台</a>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td colspan="2">
                <blockquote class="layui-elem-quote">开发信息需开放平台审核通过后才可以看到，填写完后才可以使用授权登录功能</blockquote>
            </td>
        </tr>
        <tr>
            <td>AppID</td>
            <td>
                <div class="layui-input-inline">
                    <input
                            title="在微信开放平台注册且审核通过后可以获取到AppId"
                            type="text"
                            value="{$platform.appid}"
                            name="appid"
                            placeholder="在微信开放平台注册且审核通过后可以获取到AppId"
                            autocomplete="off"
                            class="layui-input"
                    >
                </div>
                <a href="javascript:;" class="layui-btn submit-btn" data-field="appid">保存</a>
            </td>
        </tr>
        <tr>
            <td>AppSecret</td>
            <td>
                <div class="layui-input-inline">
                    <input
                            title="在微信开放平台注册且审核通过后可以获取到AppSecret"
                            type="text"
                            value="{$platform.appsecret}"
                            name="appsecret"
                            placeholder="在微信开放平台注册且审核通过后可以获取到AppSecret"
                            autocomplete="off"
                            class="layui-input"
                    >
                </div>
                <a href="javascript:;" class="layui-btn submit-btn" data-field="appsecret">保存</a>
            </td>
        </tr>
        </tbody>
    </table>

    <table class="layui-table" lay-skin="line" style="margin: 30px 0;">
        <thead>
        <tr>
            <th style="width: 200px">微信开放平台接入配置项</th>
            <th></th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>登录授权的发起页域名</td>
            <td class="auth_url">
                {:request()->host()} <span class="tip-auth_url layui-font-green"></span>
            </td>
            <td><a href="javascript:;" class="layui-font-blue js-zclip" data-clipboard-target=".auth_url">点击复制</a></td>
        </tr>
        <tr>
            <td>授权事件接受URL</td>
            <td class="ticket_url">
                {:request()->domain() . url('platform/api/ticket')} <span class="tip-ticket_url layui-font-green"></span>
            </td>
            <td><a href="javascript:;" class="layui-font-blue js-zclip" data-clipboard-target=".ticket_url">点击复制</a></td>
        </tr>
        <tr>
            <td>公众号消息校验Token</td>
            <td>
                <div class="layui-input-inline">
                    <input
                            title="与公众平台接入设置值一致，必须为英文或者数字，长度为3到32个字符. 请妥善保管, Token 泄露将可能被窃取或篡改平台的操作数据."
                            type="text"
                            value="{$platform.token}"
                            name="token"
                            placeholder="与公众平台接入设置值一致，必须为英文或者数字，长度为3到32个字符. 请妥善保管, Token 泄露将可能被窃取或篡改平台的操作数据."
                            autocomplete="off"
                            class="layui-input token"
                    >
                </div>
                <a href="javascript:;" class="layui-btn submit-btn" data-field="token">保存</a>
                <span class="tip-token layui-font-green"></span>
            </td>
            <td>
                <a href="javascript:;" class="layui-font-blue js-zclip" data-clipboard-target=".token">点击复制</a>
            </td>
        </tr>
        <tr>
            <td>公众号消息加解密Key</td>
            <td>
                <div class="layui-input-inline">
                    <input
                            title="与公众平台接入设置值一致，必须为英文或者数字，长度为43个字符. 请妥善保管, EncodingAESKey 泄露将可能被窃取或篡改平台的操作数据."
                            type="text"
                            value="{$platform.aes_key}"
                            name="aes_key"
                            placeholder="与公众平台接入设置值一致，必须为英文或者数字，长度为43个字符. 请妥善保管, EncodingAESKey 泄露将可能被窃取或篡改平台的操作数据."
                            autocomplete="off"
                            class="layui-input aes_key"
                    >
                </div>
                <a href="javascript:;" class="layui-btn submit-btn" data-field="aes_key">保存</a>
                <span class="tip-aes_key layui-font-green"></span>
            </td>
            <td>
                <a href="javascript:;" class="layui-font-blue js-zclip" data-clipboard-target=".aes_key">点击复制</a>
            </td>
        </tr>
        <tr>
            <td>公众号消息与事件接受URL</td>
            <td class="message_url">
                {:request()->domain() . '/app/wechat/appid/$APPID$'}
                <span class="tip-message_url layui-font-green"></span>
            </td>
            <td><a href="javascript:;" class="layui-font-blue js-zclip" data-clipboard-target=".message_url">点击复制</a></td>
        </tr>
        <tr>
            <td>网页开发域名</td>
            <td class="url">
                {:request()->host()}
                <span class="tip-url layui-font-green"></span>
            </td>
            <td><a href="javascript:;" class="layui-font-blue js-zclip" data-clipboard-target=".url">点击复制</a></td>
        </tr>
        <tr>
            <td>平台服务器域名</td>
            <td>
                <div class="layui-input-inline">
                    <textarea
                            title="配置第三方平台服务器域名"
                            name="wxa_server_domain"
                            placeholder="设置第三方小程序服务器域名将继承自此"
                            autocomplete="off"
                            class="layui-input"
                            style="max-width: 100%;height: auto;"
                            rows="4"
                    >{$platform.wxa_server_domain}</textarea>
                </div>
                <a href="javascript:;" class="layui-btn submit-btn" data-field="wxa_server_domain">保存并同步到开放平台</a>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>平台业务域名</td>
            <td>
                <div class="layui-input-inline">
                    <input
                            title="第三方平台业务域名"
                            type="text"
                            value="{$platform.wxa_jump_h5_domain}"
                            name="wxa_jump_h5_domain"
                            placeholder="此域名的下的页面才可用于webview, 最多可以添加200个小程序业务域名，以;隔开"
                            autocomplete="off"
                            class="layui-input"
                    >
                </div>
                <a href="javascript:;" class="layui-btn submit-btn" data-field="wxa_jump_h5_domain">保存并同步到开放平台</a>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>检验文件</td>
            <td>
                <div class="layui-input-inline">
                    <input
                            readonly
                            type="text"
                            value="{$platform.verify_file}"
                            name="verify_file"
                            placeholder="从开放平台中下载的校验文件"
                            autocomplete="off"
                            class="layui-input"
                    >
                </div>
                <a href="javascript:;" class="layui-btn" id="picker"><i class="fa fa-upload"></i>选择文件</a>
            </td>
            <td></td>
        </tr>
        </tbody>
    </table>
</form>
{/block}

{block name="js"}
{js href='__STATIC__/libs/clipboard/clipboard.min.js' /}
<script>
    layui.use(['upload', 'jquery'],function(){
        var upload = layui.upload
                ,upload_index
        , $ = layui.jquery;
        upload.render({
            elem: '#picker'
            ,url: '{:url("verifyFilePost")}'
            ,accept: 'file' //允许上传的文件类型
            ,multiple: false
            ,exts: "txt"
            ,before: function () {
                upload_index = layer.load(1);
            }
            ,done: function(res, index, upload){ //上传后的回调
                layer.close(upload_index);
                if(res.code === 1){
                    layer.msg(res.msg);
                    $('input[name=verify_file]').val(res.data.src);
                }else{
                    layer.alert(res.msg);
                }
            }
            ,error: function (index, upload) {
                layer.close(upload_index);
            }
        });

        $('.submit-btn').on('click', function () {
            let field = $(this).data('field');
            let value = $.trim($("[name="+field+"]").val());
            if(value === ''){
                layer.alert('请输入内容');
                return;
            }
            let loading_index;
            let param = {};
            param[field] = value;
            $.ajax({
                url : "",
                method: 'post',
                data: param,
                beforeSend: function(){
                    loading_index = layer.load(1);
                },
                success : function(res) {
                    if(res.code === 1 ) {
                        layer.msg(res.msg, {time: 1000}, function(){});
                    } else{
                        layer.alert(res.msg);
                    }
                },
                error: function(request, textStatus){
                    layer.msg('500 Internal Server Error');
                },
                complete: function(){
                    layer.close(loading_index);
                }
            });
        });

        var clipboard = new ClipboardJS('.js-zclip');
        clipboard.on('success', function (e) {
            var name = $(e.trigger).data('clipboard-target').substring(1);
            $(".tip-" + name).show().insertAfter($('.tip-' + name)).html('复制成功').fadeOut(2000);
            e.clearSelection();
        });
        clipboard.on('error', function (e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
        });
    });
</script>
{/block}
{block name="css"}
<style>
    .layui-input-inline{width: 50%;}
</style>
{/block}
